<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动画属性实现轮播图</title>
    <style>
        :root {
            /* 单个图片宽度 */
            --width: 700px;
            /* 个数 */
            --count: 4;
        }

        /* 显示的地方 */
        .banner {
            text-align: center;
            margin: 0px auto;
            width: calc(var(--width));
            height: 700px;
            overflow: hidden;
        }

        /* 图片墙 */
        .banner-box {
            width: calc(var(--width) * (var(--count)-1));
            height: 700px;
            /* 添加动画*/
            
        }
        .banner-box-active{
            animation: myname 8s infinite 1s forwards;
        }

        .banner-box:hover {
            /*鼠标悬停轮播图暂停*/
            animation-play-state: paused;
        }

        .banner-box>img {
            float: left;
            /* 设置图片左浮动*/
        }

        /* 这里就必须手动了，
            key有3个就是 33 33 33
            四个就是25 25 25 25
            value有三个就是根据图片大小决定横移的程度
        */
        @keyframes myname {
            /*设置动画，myname是动画名字，可更改*/
            33% {
                margin-left: 0px;
            }
            66% {
                margin-left: -700px;
            }
            100% {
                margin-left: -1400px;
            }
        }
    </style>
    <style>
        .button {
            width: 95%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            height: 300px;
        }

        .pot {
            display: inline;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="banner-box banner-box-active">
            <img src="https://img2.baidu.com/it/u=3340340328,1872355026&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676394000&t=85b364879b4be9cabe52cb9a9e5186e4"
                height="700" width="700" />
            <img src="https://img1.baidu.com/it/u=2199390649,3359689432&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676394000&t=e763f1817387b639a566613ebd8e2a07"
                height="700" width="700" />
            <img src="https://img1.baidu.com/it/u=2792609282,486594449&fm=253&fmt=auto&app=138&f=JPEG?w=373&h=373"
                height="700" width="700" />


        </div>

    </div>
    <div class="button">
        <div class="pot" index="0">⚫</div>
        <div class="pot" index="1">⚫</div>
        <div class="pot" index="2">⚫</div>
    </div>
    <script>
        let width = 700
        document.querySelector(".button").addEventListener(("click"), (e) => {
            console.log(e.target)
            document.querySelector(".banner-box").classList.remove("banner-box-active")
            document.querySelector(".banner-box").style.marginLeft = -e.target.getAttribute("index") * width + "px"
            setTimeout(()=>{
                document.querySelector(".banner-box").classList.add("banner-box-active")
            },1000)
        })
    </script>
</body>

</html>